<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<!-- Bootstrap CSS -->    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <!-- bootstrap theme -->
    <link href="css/bootstrap-theme.css" rel="stylesheet">

	<!-- font icon -->
    <link href="css/elegant-icons-style.css" rel="stylesheet" />
    <link href="css/font-awesome.css" rel="stylesheet" />
    <!-- Custom styles -->
    <link href="css/style.css" rel="stylesheet">
    <link href="css/style-responsive.css" rel="stylesheet" />
    
	<link href="js/layui/css/layui.css" media="all"/>
	
  	<script src="js/jquery-3.2.1/jquery-3.2.1.js"></script>
  	<script src="js/jquery.validate.min.js"></script>
</head>

  <body class="login-img3-body">

    <div class="container">

      <form class="login-form " action="${pageContext.request.contextPath}/index.do" method="post">        
        <div class="login-wrap">
            <p class="login-img"><i class="icon_lock_alt"></i></p>
            <div class="input-group form-group has-feedback">
              <span class="input-group-addon"><i class="icon_profile"></i></span>
              <input type="text" class="form-control layui-input"   name="username" id="username">
            </div>
            <label class="checkbox" id="usernameError" style="color: firebrick;font-family: '微软雅黑';font-size: larger;"></label>
            <div class="input-group form-group has-feedback">
                <span class="input-group-addon"><i class="icon_key_alt"></i></span>
                <input type="password" class="form-control layui-input" name="password" id="password">
             </div>
             <label class="checkbox" id="passwordError" style="color:firebrick ;font-family: '微软雅黑';font-size: larger;"></label>
            <button class="btn btn-primary btn-lg btn-block" type="submit">Login</button>
        </div>
      </form>

    </div>


  </body>

<script src="js/layui/layui.js"></script>
<script>
//使用layui声明
layui.use('layer', function(){
 			var layer = layui.layer;
 		}); 
    $(".login-form").validate({
        debug: true,//调试模式取消submit的默认提交功能
        focusInvalid: true,//当为false时,验证无效时,没有焦点响应
        onkeyup: false,
        submitHandler: function(form){//表单提交句柄，为一回调函数，带一个参数：form
        	//alert("提交表单");
            form.submit();   //提交表单
        },
        rules:{
            username:{
                required:true,

            },

            password:{
                required:true,
                rangelength:[6,12]
            },
        },
        messages:{
            username:{
                required:"用户名不能为空!",
            },

            password:{
                required: "密码不能为空!",
                rangelength: $.format("密码6至12位!")
            	
            }
        },
        errorPlacement: function(error,element){
			if(element.attr("id")=="username"){
				error.appendTo("#usernameError");//将用户名验证的错误提示信息放入指定位置
			}
			if(element.attr("id")=="password"){
				error.appendTo("#passwordError");//将密码提示信息放入指定位置
			}
		}

    });


    window.onload = function(){
    	var value = ${value};
    	if(value == "1"){
    		layer.msg("用户名或密码不正确！请重新输入！");
    	}
        

    }



</script>

</html>
